<template>
    <div v-if="dom">
        <div :data-transfer="true" v-transfer-dom="dom" style="position: absolute;" :style="{top : top + 'px',left : left + 'px'}">
            <slot />
        </div>
    </div>
</template>

<script>
import TransferDom from './transfer-dom';
import { getMap } from '../ViewerCache';
export default {
    props: ['simpleMap', 'geometry'],
    directives: { TransferDom },
    data() {
        return {
            top: 0,
            left: 0,
            dom: null,
        }
    },
    watch: {
        geometry: {
            deep: true,
            immediate: true,
            handler() {
                this.$nextTick(() => {
                    this.move();
                })
            }
        }
    },
    mounted() {
        var map = getMap(this.simpleMap);
        this.dom = map.getViewer().container
        map.on('Tick', this.move);
    },
    methods: {
        move() {
            var map = getMap(this.simpleMap);
            var style = map._getWindowCoordinates(this.geometry);
            if (style) {
                this.left = style.x;
                this.top = style.y;
            }
        }
    },
    beforeDestroy() {
        var map = getMap(this.simpleMap);
        map.off('Tick', this.move);
    }
}
</script>